<%--
  Created by IntelliJ IDEA.
  User: hhx
  Date: 2025/1/7
  Time: 15:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增商品</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css"><link>
    <style>
        .txt:focus{
            border: 2px solid #65a0fa;
            outline: none;
        }
    </style>
</head>
<body>
<!-- 判断是否登陆 -->
<c:if test="${empty user}">
    <jsp:forward page="login.jsp"></jsp:forward>
</c:if>
<div class="main">
    <h1>新增商品</h1>
    <div class="add">
        <form method="post" action="goodsServlet?method=add" onsubmit="return check()"  accept-charset="UTF-8">
            <ul>
                <li style="align-content: center;">
                    <input id="avatar" type="file" name="fileName" style="display: none"/>
                    <img src="./images/default.jpg" alt="商品图片" id="img" title="点击上传商品图片" onclick="F_Open_dialog()"/>
                    <p>上传图片</p>
                </li>
                <li>&nbsp;&nbsp;商品编号:
                    <input type="text" class="txt" name="itemId" style="width: 400px;" placeholder="请输入商品编号">
                </li>
                <li>
                    <span style="color: red;">*</span>
                    商品名称:
                    <input type="text" class="txt" name="goodsName" style="width: 400px;" placeholder="请输入商品名称">
                </li>
                <li>&nbsp;&nbsp;商品类型:
                    <input type="text" class="txt" name="goodsType" style="width: 400px;" placeholder="请输入商品价格">
                </li>
                <li>&nbsp;&nbsp;商品品牌：<input type="text" class="txt" name="goodsBrand" style="width:400px;"
                                                placeholder="请输入商品品牌"/></li>
                <li><span style="color: red">*</span> 商品单价：<input type="text" class="txt" name="goodsPrice"
                                                                      style="width:380px;" placeholder="请输入商品单价"
                                                                      value="0.00"/>&nbsp;元
                </li>
                <li><span style="color: red">*</span> 商品数量：<input type="text" class="txt" name="goodsSum"
                                                                      style="width:400px;" placeholder="请输入商品数量"
                                                                      value="0"/></li>
                <li>&nbsp;&nbsp;商品描述：
                    <textarea name="goodsDesc" cols="49" style="padding: 3px;" class="txt" rows="4"
                              placeholder="请输入商品描述"></textarea>
                </li>
                <li>&nbsp;&nbsp;商品折扣：
                    <select name="goodsDiscount" style="width:400px;">
                        <option value="1">请选择商品折扣</option>
                        <option value="0.1">一折</option>
                        <option value="0.2">二折</option>
                        <option value="0.3">三折</option>
                        <option value="0.4">四折</option>
                        <option value="0.5">五折</option>
                        <option value="0.6">六折</option>
                        <option value="0.7">七折</option>
                        <option value="0.8">八折</option>
                        <option value="0.9">九折</option>
                    </select></li>
                <li>&nbsp;&nbsp;预计价格<input type="text" class="txt" name="total" style="width:380px;" value="0.00" readonly/>&nbsp;元
                </li>
                <li class="left-m">
                    <input type="hidden" name="goodsImg" value="default.jpg"/>
                    <button type="button" onclick="location.href='goodsServlet'">&lt; 返回</button>
                    <button type="submit">添加</button>
                    <button type="reset">重置</button>
                </li>
            </ul>
        </form>
    </div>
</div>
</body>
<script src="js/jquery-1.12.2.js" type="text/javascript"></script>
<script type="text/javascript">
    // 表单验证
    function check() {
        let $goodsName = $("[name='goodsName']");
        let $goodsPrice = $("[name='goodsPrice']");
        let $goodsSum = $("[name='goodsSum']");
        if ($goodsName.val() == "") { // 商品名称
            alert("请输入商品名称");
            return false;
        }
        if ($goodsPrice.val() == "") { // 商品价格
            alert("请输入商品价格");
            return false;
        }
        if ($goodsSum.val() == "") { // 商品数量
            alert("请输入商品数量");
            return false;
        }
        return true;
    }
    function F_Open_dialog() {
        document.getElementById("avatar").click();
    }
    $(function () {
        // 文件上传
        $("[name='fileName']").change(function () {
            let formData = new FormData();
            formData.append("file", $("[name='fileName']")[0].files[0]);
            $.ajax({
                url: "goodsServlet?method=getImg",
                type: "POST",
                data: formData,
                dataType: "text",
                contentType: false,
                processData: false,
                success: function (res) {
                    console.log("res",res)
                    $("input[name='goodsImg']").val(res);
                    $("#img").prop("src", "./images/" + res);
                    // console.log("res",res)
                    // if (res.status===200) {
                    //     console.log("data",res)
                    //
                    // }
                },
                error: function (err) {
                    console.log(err);
                }
            });
        });
        // 计算商品总价
        $("[name='goodsPrice']").blur(calculateTotalPrice);
        $("[name='goodsDiscount']").change(calculateTotalPrice);
    });
    // 计算商品总价
    function calculateTotalPrice() {
        let $goodsPrice = parseFloat($("[name='goodsPrice']").val());
        let $goodsDiscount = parseFloat($("[name='goodsDiscount']").val());
        let price = $goodsPrice * $goodsDiscount;
        $("[name='total']").val(price.toFixed(2));
    }
</script>
</html>
